<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>回显</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">

    <link rel="stylesheet" href="../../../static/layui2/css/layui.css" media="all"/>
    <link rel="stylesheet" href="../../../static/css/font_eolqem241z66flxr.css" media="all"/>
</head>
<body class="childrenBody">
<form class="layui-form" lay-filter="demo">


    <div class="layui-form-item" style="padding: 25px;">
        <div class="layui-inline">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-block">
                <input type="text" name="name" class="layui-input newsName" lay-verify="required" placeholder="请输入姓名">
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-block">
                <input type="number" name="phone" class="layui-input newsName" lay-verify="required"
                       placeholder="请输入手机号">
            </div>
        </div>

    </div>

    <div class="layui-form-item" style="padding: 25px;">

        <div class="layui-inline">
            <label class="layui-form-label">定金</label>
            <div class="layui-input-block">
                <input type="number" name="payAdvance" class="layui-input newsName" lay-verify="required"
                       placeholder="请输入定金">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">定价</label>
            <div class="layui-input-block">
                <input type="number" name="price" class="layui-input newsName" lay-verify="required"
                       placeholder="请输入定价">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">实收</label>
            <div class="layui-input-block">
                <input type="number" name="netReceipts" class="layui-input newsName" lay-verify="required"
                       placeholder="请输入实收">
            </div>
        </div>
    </div>
    <div class="layui-form-item" style="padding: 25px;">

        <div class="layui-inline">
            <label class="layui-form-label">日期</label>
            <div class="layui-input-block">
                <input type="text" name="dateMarriage"  lay-verify="required"    id="date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input"
                       placeholder="请选择日期">
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <select name="type" >
                    <option value="0">未完成</option>
                    <option value="1">已完成</option>
                    <option value="2">作废</option>
                </select>
            </div>
        </div>


    </div>

    <div class="layui-form-item" style="padding: 25px;">
        <label class="layui-form-label">地址</label>
        <div class="layui-input-block">
            <textarea placeholder="请输入地址" name="adress" class="layui-textarea"></textarea>
        </div>
    </div>

    <div class="layui-form-item" style="padding: 25px;">
        <label class="layui-form-label">描述</label>
        <div class="layui-input-block">
            <textarea placeholder="请输入内容摘要" name="desc" class="layui-textarea"></textarea>
        </div>
    </div>

    <div class="layui-form-item" style="padding: 25px;">
        <label class="layui-form-label">列表</label>
        <div class="layui-input-block" style="    width: 60%;">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend>药材</legend>
            </fieldset>

            <div class="layui-form">
                <table class="layui-table">
                    <colgroup>
                        <col width="150">
                        <col width="150">
                        <col width="150">
                        <col width="150">
                    </colgroup>
                    <thead>
                    <tr>
                        <th>名称</th>
                        <th>单价</th>
                        <th>数量</th>
                        <td style="text-align: center">
                            <button type="button" class="layui-btn  add_class  layui-icon   layui-icon-add-1 "
                                    data-type="add_level"></button>
                        </td>
                    </tr>
                    </thead>
                    <tbody id="body_html_id">


                    </tbody>
                </table>
            </div>
        </div>
    </div>


    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit="" type="button" lay-filter="formData">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>

</form>
<script type="text/javascript" src="../../../static/layui2/layui.js"></script>
<script type="text/javascript" src="../../../static/js/queryUtils.js"></script>
<!--	<script type="text/javascript" src="demoAdd.js"></script>-->

<script>
    layui.use(['jquery', 'form', 'laydate', 'upload', 'laytpl'], function () {
        var form = layui.form
            , layer = layui.layer
            , laydate = layui.laydate
            , $ = layui.jquery
            , laytpl = layui.laytpl
            , upload = layui.upload;



        //日期
        laydate.render({
            elem: '#date'
        });

        var operateType = QueryUtils.GetQueryString("type");
        var id = QueryUtils.GetQueryString("id");
        var active = {
            cancel: function () {
                // 当你在iframe页面关闭自身时
                var index = parent.layer.getFrameIndex(window.name); // 先得到当前iframe层的索引
                parent.layer.close(index); // 再执行关闭
            },
            add_level: function () {
                var getTpl = $("#demo_temp").html()
                    , view = $("#body_html_id");
                laytpl(getTpl).render(data, function (html) {
                    $(view).append(html);
                });
            },

        };

        $('.operate-button-group .layui-btn').on('click', function () {

            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        $(".add_class ").click(function () {

            var getTpl = $("#demo_temp").html()
                , view = $("#body_html_id");
            laytpl(getTpl).render({}, function (html) {
                $(view).append(html);
            });
        });

        $(document).on("click", ".delete_class", function () {
            var tdHmtl = $(this).parent().parent();
            var type = $(tdHmtl).attr("data-type");
            if (type == "add") {
                $(tdHmtl).remove();
            } else if (type == "update") {
                $(tdHmtl).hide();
                $(tdHmtl).attr("data-type", "del");
            }

            debugger
        });


        //执行实例
        var uploadInst = upload.render({
            elem: '#test1' //绑定元素
            , url: '/upload/' //上传接口
            , done: function (res) {
                //上传完毕回调
            }
            , error: function () {
                //请求异常回调
            }
        });

        switch (operateType) {
            case "edit":
                $.ajax({
                    url: "/OrderController/view",
                    data: {id: id},
                    dataType: "json",
                    type: "post",
                    async: false,
                    success: function (res) {
                        debugger

                        if (res.code === "00") {
                            //表单初始赋值
                            form.val('demo', {
                                 "name": res.data.name
                                , "phone": res.data.phone
                                , "dateMarriage": res.data.date_marriage
                                , "payAdvance": res.data.pay_advance
                                , "adress": res.data.adress
                                , "desc": res.data.desc
                                , "price": res.data.price
                                , "netReceipts": res.data.net_receipts
                                , "jsonData": res.data.jsonData
                                , "type": res.data.type

                            })

                            var getTpl = $("#demo_list_temp").html()
                                , view = $("#body_html_id");

                            res.data.jsonData = JSON.parse(res.data.jsonData)
                            laytpl(getTpl).render(res.data, function (html) {
                                $(view).append(html);
                            });


                            form.render();
                        } else if (res.code === "01") {
                            layer.msg(res.msg, function () {
                            });
                        }
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        console.error(XMLHttpRequest.status);
                        console.error(XMLHttpRequest.readyState);
                        console.error(textStatus);
                    }
                });
                break;

        }


        //监听提交
        form.on('submit(formData)', function (data) {
            var list = [];

            var children = $("#body_html_id >tr");

            $.each(children, function (index, item) {
                var data = {};
                var name = $(item).find("input[name='name']").val();
                var unit_price = $(item).find("input[name='unit_price']").val();
                var num = $(item).find("input[name='num']").val();
                data["name"] = name;
                data["unit_price"] = unit_price;
                data["num"] = num;
                list.push(data);

            });
            data.field.jsondata = JSON.stringify(list);

            debugger
            /*layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            });*/
            if (operateType === "add") {
                layer.msg('确认保存信息吗', {
                    time: 0
                    , btn: ['确定', '取消']
                    , shade: 0.3
                    , yes: function (index) {
                        layer.close(index); // 关闭当前提示框
                        $.ajax({
                            url: "/OrderController/add",
                            data: data.field,
                            dataType: "json",
                            type: "post",
                            async: false,
                            success: function (res) {

                                if (res.code === "00") {
                                    var i = parent.layer.getFrameIndex(window.name);
                                    parent.layer.close(i);  // 关闭新建页面
                                    parent.layui.table.reload('dataTable', {});    // 父页面表格刷新
                                    parent.layer.msg("保存成功", {offset: '150px'});   // 父页面弹出保存成功
                                } else if (res.code === "01") {
                                    layer.msg(res.msg, function () {
                                    });
                                }
                            },
                            error: function (XMLHttpRequest, textStatus, errorThrown) {
                                console.error(XMLHttpRequest.status);
                                console.error(XMLHttpRequest.readyState);
                                console.error(textStatus);
                            }
                        });
                    }
                });
            } else if (operateType === "edit") {
                data.field.id = id;
                layer.msg('确认保存信息吗', {
                    time: 0
                    , btn: ['确定', '取消']
                    , shade: 0.3
                    , yes: function (index) {
                        layer.close(index); // 关闭当前提示框
                        $.ajax({
                            url: "/OrderController/update",
                            data: data.field,
                            dataType: "json",
                            type: "post",
                            async: false,
                            success: function (res) {

                                if (res.code === "00") {
                                    var i = parent.layer.getFrameIndex(window.name);
                                    parent.layer.close(i);  // 关闭新建页面
                                    parent.layui.table.reload('dataTable', {});    // 父页面表格刷新
                                    parent.layer.msg("保存成功", {offset: '150px'});   // 父页面弹出保存成功
                                } else if (res.code === "01") {
                                    layer.msg(res.msg, function () {
                                    });
                                }
                            },
                            error: function (XMLHttpRequest, textStatus, errorThrown) {
                                console.error(XMLHttpRequest.status);
                                console.error(XMLHttpRequest.readyState);
                                console.error(textStatus);
                            }
                        });
                    }
                });
            }
            return false;
        });

    });
</script>


<script id="demo_temp" type="text/html">
    <tr data-type="add" data-id="0">
        <td><input type="text" name="name" class="layui-input newsName" lay-verify="required" placeholder="请输入名称">
        </td>
        <td><input type="number" name="unit_price" class="layui-input newsName" lay-verify="required"
                   placeholder="请输入价格">
        </td>
        <td><input type="number" name="num" class="layui-input newsName" lay-verify="required" placeholder="请输入数量">
        </td>
        <td style="text-align: center">
            <button type="button" class="layui-icon layui-icon-close  layui-btn delete_class"></button>
        </td>
    </tr>
</script>


<script id="demo_list_temp" type="text/html">


    {{#  layui.each( d.jsonData , function(index, item){ }}

    <tr data-type="add" data-id="0">
        <td><input type="text" name="name" value="{{ item.name }}" class="layui-input newsName" lay-verify="required"
                   placeholder="请输入名称">
        </td>
        <td><input type="number" name="unit_price" value="{{ item.unit_price }}" class="layui-input newsName"
                   lay-verify="required" placeholder="请输入价格">
        </td>
        <td><input type="number" name="num" value="{{ item.num }}" class="layui-input newsName" lay-verify="required"
                   placeholder="请输入数量">
        </td>
        <td style="text-align: center">
            <button type="button" class="layui-icon layui-icon-close  layui-btn delete_class"></button>
        </td>
    </tr>


    {{#  }); }}


</script>


</body>
</html>